<template>
  <div class="home-container">
    <!-- 导航栏 -->
     <!-- 导航栏 -->
     <van-nav-bar class="page-nav-bar" fixed title="等待时间">
    </van-nav-bar>

    <!-- 导航栏结束 -->
    <div class="list">
      <van-cell v-if="visible">您前面有{{waitNumber}}人</van-cell>
      <van-cell v-else>您还没有挂号</van-cell>
        <van-cell v-show="visible">你的号码：{{userNumber}}号
          <van-button class="quitNum" @click="quitBookNumber(userBookList.id)" v-show="this.userBookList">取消挂号</van-button>
        </van-cell>
        <van-cell v-show="visible">预计等待：<b>{{userBookList.waitingTime}}</b> 分钟</van-cell>

        <van-cell>预约列表：</van-cell>
    </div>

    <div class="container">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <van-card v-for="(item) in waitPeopleList" :key="item.id">
        <p slot="title">姓名：{{item.userName}} <b>号码：{{item.sort}}</b>  </p>
        <p slot="desc">预计等待时间：{{item.waitingTime}}分钟</p>
        <span slot="desc">所挂科室：{{item.depName}}</span>
        <!-- <template #footer>
          <van-button size="mini">取消挂号</van-button>
        </template> -->
      </van-card>
    </van-pull-refresh>
    </div>

</div>
</template>

<script>
import { WaitingNumber, getNumber, delNumber } from '@/api/user'
import { mapState } from 'vuex'
import { Notify, Dialog } from 'vant'

export default {
  name: 'HomeIndex',
  components: {
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      visible: false, // 控制上方挂号就显示信息，没挂号就不显示
      isLoading: false, // 下拉刷新状态
      activeName: '1',
      // 将用户信息加到vux的列表中
      waitPeopleList: [], // 等待人的列表 //
      waitNumber: 0, // 等待的人数
      userBookList: [], // 当前挂号人的信息
      // 挂号人的id
      userNumber: 0
    }
  },
  created () {
    this.loadUserList()
    this.userNum(this.userinfo.id)
  },
  mounted () {
    // setInterval(() => {
    //   this.userNum(this.userinfo.id)
    // }, 20000)
  },
  methods: {

    async loadUserList () {
      try {
        const { data: { data: res } } = await WaitingNumber()
        this.$store.commit('setwaitPeopleList', res)
        this.waitPeopleList = res
        // console.log(this.waitPeopleList)
        // 先存到一个数组中，最后再存到vuex中
        const nameArr = [] // 当前所有挂号人的名字形成数组
        this.waitPeopleList.forEach(item => {
          nameArr.push(item.userName)
          // 查询自己在其中的位置索引
        })
        this.$store.commit('setWaitName', nameArr)
        // 查询自己的名字在数组中的序号,用vux的用户名
        const userName = this.userinfo.name
        const num = nameArr.indexOf(userName)

        this.waitNumber = num
        if (nameArr.indexOf(userName) === 0) {
          Dialog.alert({
            title: '友情提醒',
            message: '您当前排在第一位，请注意'
          }).then(() => {
            // on close
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 用户号码
    async userNum (value) {
      const { data: { data: res } } = await getNumber(value)
      console.log(res)
      this.userBookList = res
      if (this.userBookList) {
        this.visible = true
      } else {
        this.visible = false
      }
      console.log(this.userBookList)
      this.userNumber = this.userBookList.sort
    },
    // 当取消挂号，应把当前id对应的挂号信息表的数据删除
    async quitBookNumber (userId) {
      this.isLoading = true
      try {
        const res = await delNumber(userId)
        this.$toast.success(res.data.data)
        this.loadUserList()
        setTimeout(() => {
          this.isLoading = false
        }, 1000)
        this.$router.go(0)
        // this.$router.go(0)
      } catch (error) {
        this.$toast.fail(error)
      }
    },
    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.loadUserList()
      }, 1000)
    }

  },

  computed: {
    ...mapState(['userinfo', 'waitPeopleName'])
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 50px;
  padding-bottom: 50px;
  .van-nav-bar {
    background-color: #3926fa;
    .van-nav-bar__title {
      max-width: unset;
    }
  }
  .search-btn {
    width: 200px;
    height: 32px;
    background-color: #5babfb;
    border: none;
    font-size: 17px;
    .van-icon {
      font-size: 20px;
      color: white;
    }
  }
  .container {
    height: 50vh;
    overflow-y: scroll;
    b {
      float: right;
    }
  }
  .list {
    display: block;
    top: 20px;
    font-size: 30px;
    .list .van-cell {
      display: block;
      position: fixed;
      height: 40px;
    }
    .quitNum {
      float: right;
      height: 30px;
    }
  }
  .van-count-down {
    display: inline;
  }
}

</style>
